<template>
	<view class="">
		<view class="tab">
			<view class="choice-btn" @click="slideBtn">
				<view class="choice-p">{{get_choice}}</view>
				<image src="../../static/images/da.png" class="da"></image>
			</view>
			<view class="tab-item on" @click="choice" :data-id="choiceinfo.cid" :data-name="choiceinfo.cname">{{choiceinfo.cname}}</view>
			<view class="tab-item" @click="choice" :data-id="choiceinfo.cnextid" :data-name="choiceinfo.cnextname">{{choiceinfo.cnextname}}</view>
			<!-- 选择风格下拉 -->
			<view :class="isSlide==!isBool?'choice-slide moveDown':'choice-slide'">
				<scroll-view scroll-y class="choice-scroll">
					<view v-for="item in resData.category_list" @click="choice" :data-id="item.category_id" :data-name="item.name" :class="item.category_id == choice.cid ?'choice-slide-bar on':'choice-slide-bar'">{{item.name}}</view>
				</scroll-view>
			</view>
		</view>

		<view class="tab-margin"></view>

		<!-- 遮罩 -->
		<view class="mask" v-if="isSlide" @click="slideUp" catchtouchmove="true"></view>

		<view class="pic-list">
			<view class="pic-item" v-for="item in list" @click="get_open" :data-id="item.id">
				<view class="pic-img">
					<image :src="item.cover_img" class="pic-image"></image>
				</view>
				<view class="pic-info">
					<view class="pic-name">{{item.holder}}</view>
					<view class="location">
						<image src="../../static/images/location.png" class="location-icon"></image>
						<view class="location-p">{{item.location}}</view>
					</view>
				</view>
			</view>
		</view>
		<page-foot :indexNum="indexNum"></page-foot>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSlide: false,
				indexNum: 2,
				resData: [],
				page: 0,
				list: [],
				get_choice: '选择风格',
				
				choiceinfo: {
					cid: '',
					cname: '全部',
					cnextid: '',
					cnextname: ''
				}
			}
		},

		/**
		 * 生命周期函数--点击事件集合
		 */
		methods: {
			slideBtn(){
				this.isSlide = !this.isSlide
			},
			slideUp(){
				this.isSlide = false
			},
			choice(e){
				this.get_choice = e.currentTarget.dataset.name
				this.choiceinfo.cid = e.currentTarget.dataset.id
				this.choiceinfo.cname = e.currentTarget.dataset.name
				this.choiceinfo.cnextname = ''
				this.choiceinfo.cnextid = ''
				this.page = 0
				this.list = []
				this.get_list()
				this.isSlide = false
				
			},
			
			get_open(e){
				var id = e.currentTarget.dataset.id
				uni.navigateTo({
				    url: '/pages/works/iteminfo?id='+id
				});
			},
			
			
			get_init(){
				this.page = 0
				this.category_id = ''
				this.get_list()
			},
			get_list(){
				var that = this
				var post_data = {
					page: that.page,
					category_id: that.choiceinfo.cid
				}
				that.$http({
					url: 'Api/Work/item_list',
					data: post_data,
					hideLoading: false,
					success: res => {
						that.resData = res.data
						
						that.page++
						var data = res.data.list
						that.list = that.list.concat(data)
						
						if(that.choiceinfo.cnextname == ''){
							that.choiceinfo.cnextname = res.data.next.name
							that.choiceinfo.cnextid = res.data.next.category_id
						}
					}
				})
			}
			
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			this.choiceinfo.cid = options.cid ? options.cid : ''
			this.choiceinfo.cname = options.name ? options.name : '全部'
			this.get_init()
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady() {

		},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh() {

		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			this.get_list()
		},
	}
</script>

<style scoped>
	page {
		background: #f9f9f9;
	}

	.tab {
		width: 100%;
		height: 100rpx;
		display: flex;
		background: #fff;
		border-bottom: 1px #e6e6e6 solid;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 91;
	}

	.tab-margin {
		height: 100rpx;
	}

	.choice-btn,
	.tab-item {
		width: 33.3%;
		height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #4c4c4c;
		position: relative;
	}

	.choice-btn:after,
	.tab-item:after {
		display: block;
		content: '';
		width: 1px;
		height: 30rpx;
		background: #ccc;
		position: absolute;
		top: 50%;
		right: 0;
	}

	.tab-item:last-child:after {
		display: none;
	}

	.tab-item.on {
		font-weight: bold;
		color: #333;
	}

	.tab-item.on:before {
		display: block;
		content: '';
		width: 60rpx;
		height: 6rpx;
		background: #f7d031;
		position: absolute;
		bottom: 0;
		left: 50%;
		margin-left: -30rpx;
	}

	.da {
		width: 24rpx;
		height: 14rpx;
		margin-left: 10rpx;
	}

	.choice-slide {
		width: 100%;
		height: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		position: absolute;
		top: 100rpx;
		left: 0;
		transition: all 0.3s;
		overflow: hidden;
	}

	.moveDown {
		height: 400rpx;
	}

	.choice-scroll {
		height: 225rpx;
		width: 100%;
	}

	.choice-slide-bar {
		height: 75rpx;
		border-bottom: 1px #e6e6e6 solid;
		text-align: center;
		line-height: 75rpx;
		font-size: 28rpx;
		color: #4c4c4c;
	}

	.choice-slide-bar:last-child {
		border-bottom: none;
	}

	.choice-slide-bar.on {
		color: #333;
		font-weight: bold;
	}

	.pic-list {
		padding: 10rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.pic-item {
		padding: 10rpx;
		margin-bottom: 10rpx;
		width: 360rpx;
		border: 1px #e6e6e6 solid;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, .1);
	}

	.pic-img {
		width: 100%;
		height: 480rpx;
	}

	.pic-image {
		height: 480rpx;
	}

	.pic-info {
		padding: 20rpx 0;
	}

	.pic-name {
		margin-bottom: 20rpx;
		font-size: 30rpx;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		font-weight: bold;
	}

	.location {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		color: #4c4c4c;
	}

	.location-icon {
		width: 20rpx;
		height: 28rpx;
		margin-right: 12rpx;
	}
</style>
